<!DOCTYPE html>
<html>
  <head>
    <title>App Swap 2 Options</title>
    <style>
      body{background-color:#eef;color:#000;font-family:arial,sans-serif;font-size:12px}
      ul, ol, li, dl, dd {margin:0;padding:0;list-style:none}
      p, form, input {margin:0}
      img {border:0}
      h1, h2, h3, h4, h5, h6 {margin:0;padding:0}
      a{color:#11c;text-decoration:none}
      a:hover{text-decoration:underline}
      /*clear float*/
      .clearfix {*zoom: 1;}
      .clearfix:before, .clearfix:after {display: table; content: "";}
      .clearfix:after {clear: both;}
      
      .content{
          background-color:#fff;border-color:#abd;border-style:solid;border-width:4px;
          margin:10px auto 0;padding:12px;width:650px;-webkit-border-radius:12px;
      }
      .title{color:#004080;font-size:20px;margin:10px 0 0;text-align:center}
      .operation_tip{font-weight:bold; height:20px; overflow:hidden;text-align:center; padding-top:10px;}
      .operation_tip span {background-color:#FFEF8C; padding: 2px 10px; -webkit-border-radius:5px;}
      .fresh_man_tip { display:none; text-align:center; font-size:14px; color:red; padding:10px 0; }
      .content_nav{border-bottom:1px solid #004080; padding-top:10px;}
      .content_nav li{float: left; width:100px; height:24px; line-height:24px; text-align: center; background:#CCC;}
      .content_nav .selected{background:#004080; color:#FFF; }
      .content_nav a{ display: inline-block; width: 100%; height: 100%;  color:#333; cursor:pointer;}

      .my_history { width:153px; }
      .delete_history { margin-left:10px; }
      .delete_history u { color:#36C; margin-left:10px; cursor:pointer; }
      .swap_type_wrapper { display:none; }
      .option_row{padding:30px 10px 0}
      .option_name{float:left;font-weight:bold;margin-top:2px;width:120px;padding-right:10px;text-align:right;}
      .option_value{float:left}
      .input_tip { margin-left:5px; font-size:12px; color:#999; }
      .buttons{padding:20px 10px 10px; text-align:right; }
    </style>
    <script src="libs/beautify.js"></script>
    <script type="text/javascript" src="libs/jquery-1.7.1.min.js"></script>
  </head>
  <body>
    <div id="content" class="content">
      <div id="title" class="title">
        <img src="images/48.png" />
        <div>App Swap 2 Options</div>
      </div>
      <div id="operation_tip" class="operation_tip"></div>
      <div id="fresh_man_tip" class="fresh_man_tip">
          It seems that you are the first time to use this extension. <br />
          Please validate following app setting and click "Save" button to save it.
      </div>
      <ul id="content_nav" class="content_nav clearfix">
        <li><a>Customization</a></li>
        <li class="selected">Source</li>
      </ul>
      <div id="content_box_0">
        <div class="option_row clearfix">
          <div class="option_name">Profile:</div>
          <div class="option_value">
            <div class="option_value_primary">
                <select id="my_history" class="my_history">
                    <option value="default">Default</option>
                </select>
                <span class="delete_history"><u id="delete_history_trigger">Delete</u></span>
            </div>
          </div>
        </div>
        <div class="option_row clearfix">
          <div class="option_name">Type:</div>
          <div class="option_value">
            <div class="option_value_primary">
                <label><input name="swap_type" type="radio" value="1" />Custom Config</label>
                <span>&nbsp;&nbsp;</span>
                <label><input name="swap_type" type="radio" value="2" />GIP App ID</label>
            </div>
          </div>
        </div>
        <div id="swap_type_wrapper_2" class="swap_type_wrapper">
            <div class="option_row clearfix">
              <div class="option_name">GIP_APP_ID:</div>
              <div class="option_value">
                <div class="option_value_primary">
                    <input id="gip_app_id" type="text" value="" />
                    <span class="input_tip">ex. 8000100901</span>
                </div>
              </div>
            </div>
            <div class="option_row clearfix">
              <div class="option_name">GIP Web URL:</div>
              <div class="option_value">
                <div class="option_value_primary">
                    <input id="gip_web_url" type="text" value="" style="width:280px;" />
                    <span class="input_tip">ex. http://gip.happyelements.com</span>
                </div>
              </div>
            </div>
            <div class="option_row clearfix">
              <div class="option_name">URL Prefix:</div>
              <div class="option_value">
                <div class="option_value_primary">
				<input id="frame_url" type="text" value="" style="width:280px;" />
                    <span class="input_tip"><b style="color:red">{GIP_APP_ID}</b> will be replaced</span>
                </div>
              </div>
            </div>
        </div>
        <div id="swap_type_wrapper_1" class="swap_type_wrapper">
            <div class="option_row clearfix">
              <div class="option_name">App Height:</div>
              <div class="option_value">
                <div class="option_value_primary">
                    <label><input id="app_height" type="text" value="" />&nbsp;px</label>
                </div>
              </div>
            </div>
            <div class="option_row clearfix">
              <div class="option_name">App URL:</div>
              <div class="option_value">
                <div class="option_value_primary">
                    <input id="app_url" type="text" value="" style="width:450px;" />
                </div>
                <div id="option_get_latest"></div>
              </div>
            </div>
            <div class="option_row clearfix">
              <div class="option_name">App Config:</div>
              <div class="option_value">
                <div class="option_value_primary">
                    <textarea id="app_config" style="width:450px;height:200px;"></textarea>
                </div>
              </div>
            </div>
        </div>
        <div class="buttons clearfix">
          <button id="save_button">Save</button>
          <button id="save_as_button">Save As</button>
          <button id="reset_button">Reset</button>
        </div>
      </div>
      <div id="content_box_1">

        <div class="option_row">
            <textarea id="history_source" style="width:624px;height:300px;"></textarea>
        </div>

        <div class="buttons clearfix">
          <button id="save_source_button">Save</button>
        </div>
      </div>
    </div>
    <script src="backgrounds/options.js"></script>
  </body>
</html>
